<template>
	<view class="content">
		<view class="Bg">
			<image src="../../static/img/Bg.png"></image>
		</view>
		<view class="cont">
			<view class="avatarCont">
				<headimg :realSrc="avatar"></headimg>
			</view>
			<view class="name">{{nicheng}}</view>
			<view class="tip">
				<view>天赋决定上限</view>
				<view>努力决定下限</view>
			</view>
		</view>
		<view class="bottomCont">
			<tki-qrcode v-if="val && icon" cid="qrcode1" ref="qrcode" :val="val" :size="174" pdground="#E6B873" :icon="icon"
			 :iconSize="28" :onval="true" :loadMake="true" @result="qrR" />
			<view class="bottomTip">长按识别图中二维码</view>
			<i class="iconfont iconzhiwen"></i>
		</view>
		<view class="icons">
			<i class="iconfont iconweixin"></i>
			<i class="iconfont iconxiangce1"></i>
			<i class="iconfont iconlianjie"></i>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			headimg,
			tkiQrcode
		},
		data() {
			return {
				height: uni.getSystemInfoSync().screenHeight, //屏幕高度
				// height: 623, //屏幕高度
				nicheng: uni.getStorageSync('userInfo').nicheng ? uni.getStorageSync('userInfo').nicheng : '未设置昵称', //昵称
				avatar: uni.getStorageSync('userInfo').avatar, //头像
				val: '', //要生成的二维码值
				icon: '', //二维码图标
				src: '', //二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			var header = '';
			if (this.avatar) {
				header = this.avatar.substring(0, 7);
			}
			if (!this.avatar || (this.avatar && header != 'http://' && header != 'https:/')) {
				console.log('999999',this.avatar);
				this.avatar = this.defimg;
			}
			this.urlTobase64(this.avatar);
			this.$api.apiPost('user/currency.basic/GetExtensionLink').then(res => {
				if (res.data.code == 200) {
					var share_url = res.data.data.shareUrl;
					var share_code = share_url.split('?shareCode=');
					this.val =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx48e5e3aca6793049&redirect_uri=http://zh5.szzhizhuedu.com?shareCode=' +
						encodeURIComponent(share_code[1]) +
						'&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect';
					this.$forceUpdate();
				}
			});
		},
		methods: {
			// 网络图片转base64
			urlTobase64(url) {
				var _this = this;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						_this.icon = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
					}
				});
			},
			qrR(res) {
				this.src = res;
			}
		}
	}
</script>

<style>
	.Bg image {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.label {
		width: 80upx;
		position: absolute;
		right: 108upx;
		top: 88upx;
	}

	.cont {
		position: absolute;
		top: 160upx;
		width: 100%;
		text-align: center;
	}

	.avatarCont {
		width: 104upx;
		height: 104upx;
		margin: auto;
	}

	.name {
		color: #333333;
		margin-top: 40upx;
	}

	.tip {
		color: #E6B873;
		font-size: 32upx;
		font-weight: 500;
		margin-top: 56upx;
	}

	.tip view {
		margin-bottom: 20upx;
	}

	.bottomCont {
		position: absolute;
		bottom: 240upx;
		width: 100%;
		text-align: center;
	}

	.bottomTip {
		color: #CDCDCD;
		margin: 30upx auto 50upx;
	}

	.icons {
		position: fixed;
		bottom: 20upx;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.icons i {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background: #F6F6FE;
		border-radius: 50%;
		font-size: 50upx;
	}

	.iconzhiwen {
		color: #E6B873;
		font-size: 96upx;
	}

	.iconweixin {
		color: #09BB07;
	}

	.iconxiangce1 {
		color: #FFBA00;
	}

	.iconlianjie {
		color: #91C0FC;
	}
</style>
